<template>
  <div class="animated fadeIn">
    <!-- <Row>
      <Col :sm="24" :md="8">
        <h3> API后台管理系统 </h3>
        <h5> 数据可视化模块 </h5>
      </Col>
    </Row> -->
  </div>
</template>

<script>
  export default {
    components: {},
    name: 'dashboard',
    data() {
      return {
        value1: 0,
        value2: 0,
        value3: 0,
        speed: 10000,
      }
    },
    methods: {},
    mounted() {
      const roles = this.$store.getters.roles;
      this.$Notice.success({
        title: '欢迎使用 API 系统',
        desc: `你的账户权限是 ${roles} `,
        duration: 3
      });
    }
  }
</script>
<style type="text/css" scoped>
  .state-overview .ivu-col {
    margin-bottom: 20px
  }

  .state-overview .state-value .value {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 5px
  }

  .state-overview .state-value .title {
    font-size: 14px
  }

  .state-overview .panel {
    border-radius: 4px;
    padding: 25px 20px
  }

  .staff_progress p {
    margin: 0
  }

  .animated {
    background-color: #eff0f4
  }

  li {
    margin-bottom: 11px;
    margin-left: 10px;
    margin-right: 10px
  }

  .demo-carousel img {
    height: 100%;
    width: 100%
  }

  h3, h4, h5 {
    margin: 12px
  }

  h3 {
    margin-bottom: 20px
  }

  p {
    margin: 12px
  }

  .state-info .panel {
    margin-bottom: 20px;
    float: right;
    margin-left: 15px
  }

  .state-info .panel .summary {
    float: left;
    margin-right: 20px
  }

  .state-info .panel .summary span {
    color: #49586e;
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 10px
  }

  .state-info .panel .summary h3.red-txt {
    color: #fc8675
  }

  .state-info .panel .summary h3.green-txt {
    color: #65cea7
  }

  .state-info .panel .summary h3 {
    font-size: 200%;
    font-weight: 700;
    line-height: 20px;
    margin: 0
  }

  .page-heading h3 {
    color: #49586e;
    font-size: 25px;
    font-size: 11%;
    font-weight: 400;
    margin: 10px 0
  }

  .chart-bar img {
    display: inline-block;
    width: 68px;
    height: 45px;
    vertical-align: top
  }

  @media screen and (max-width: 767px) {
    .state-info .panel {
      width: 100%
    }
  }

  .twt-info h3 {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 900;
    margin: 10px 0 30px 0;
    text-align: center
  }

  .twt-info p {
    font-size: 18px;
    line-height: 25px;
    font-style: italic;
    margin: 0 0 20px 0;
    text-align: center
  }

  .twt-info p a {
    color: #98fdf4
  }

  .media.usr-info > .pull-left {
    margin-right: 20px;
    margin-top: 10px
  }

  .media > .pull-left {
    margin-right: 10px
  }

  .usr-info .thumb {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    -webkit-border-radius: 50%
  }

  .usr-info img {
    vertical-align: middle
  }

  .usr-info h4 {
    color: #658585;
    margin-bottom: 0
  }

  .usr-info .media-body span {
    color: #ea755c;
    font-size: 12px;
    margin-bottom: 20px;
    display: inline-block
  }

  .usr-info .media-body p {
    color: #b6bcbc
  }

  ul.user-states {
    list-style-type: none;
    padding: 20px 0
  }

  ul.user-states li {
    text-align: center;
    float: left;
    width: 33%;
    font-size: 18px;
    margin: 0
  }
</style>
